<template>
  <div id="Register">
    <!-- 注册框体 -->
    <div class="LoginDiv">
      <el-row>
        <el-col :span="8">
          <div class="loginBanner">123</div>
        </el-col>
        <el-col :span="16">
          <div class="loginContext">
            <div class="formDiv">
              <!-- 登录表单
                                ref：dom节点名称
                                model: 表单数据对象
                                label-width: 表单描述文字的宽度
                            -->
              <el-form
                ref="registerForm"
                :rules="registerRule"
                :model="registerData"
                label-width="80px"
              >
                <el-form-item style="text-align: center">
                  <h2>注册</h2>
                </el-form-item>
                <el-form-item prop="userId">
                  <el-input
                    v-model="registerData.userId"
                    placeholder="用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                  <el-input
                    type="password"
                    :show-password="true"
                    v-model="registerData.pwd"
                    placeholder="密码"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    :loading="isLoading"
                    style="width: 100%"
                    type="primary"
                    @click="doRegister"
                    >注册</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 系统名称 -->
    <h1 class="sysNameTitle">{{ sysName }}</h1>
    <!-- 版权信息 -->
    <div class="copyDiv" v-html="copyHtml"></div>
  </div>
</template>
    
  <script>
import * as accountAPI from "@/api/account.js";
export default {
  name: "Register",
  data() {
    return {
      //加载
      isLoading: false,
      //系统名称
      sysName: "保鲜仓助农平台",
      //版权信息
      copyHtml:
        "<span>&copy;周城阳个人所有,未经许可禁止商用或截取,需要可以练习2940160227@qq.com</span><br/>" +
        "Copyright © 2021  gdones.com 滇ICP备14013441号-5",
      //注册表单数据
      registerData: {
        userId: null,
        pwd: null,
       
      },
      // 表单验证规则
      registerRule: {
        //用户名必填
        userId: { required: true, message: "请输入用户名", trigger: "blur" }, //blur 输入之后触发校验
        pwd: { required: true, message: "请输入密码", trigger: "blur" },
      },
    };
  },

  methods: {
    //注册功能
    doRegister() {
      this.isLoading = true;
      this.$refs.registerForm.validate((valid) => {
        // valid 验证是否通过：true通过 false没通过
        if (valid) {
         
          let _this = this;
          accountAPI
            .add({
              ..._this.registerData,
            })
            .then(function (res) {
              console.dir(res);
              if (res.code == "200") {
                // 登录成功

                _this.$message({
                  showClose: true,
                  message: "注册成功，正在跳转登录页面...",
                  type: "success",
                  onClose: function () {
                    _this.$router.push("/");
                    _this.isLoading = false;
                  },
                });
              } else if (res.code == "500") {
                _this.$message.error(res.msg);
                _this.isLoading = false;
              } else {
                _this.$message.error(res.msg);
                _this.isLoading = false;
              }
            })
            .catch(function (err) {
              console.dir(err);
            });
        } else {
          this.isLoading = false;
          return false; // 阻止冒泡事件，阻止原生表单提交功能
        }
      });
    },
  },
};
</script>
    
<!-- CSS代码 -->
<style scoped>
#Register {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
}
.LoginDiv {
  width: 850px;
  height: 650px;
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.loginBanner {
  width: 100%;
  height: 100%;
}
.loginContext {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.formDiv {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 10%;
}
.formDiv > h2 {
  letter-spacing: 10px;
}

.sysNameTitle {
  letter-spacing: 2px;
  position: fixed;
  line-height: 10px;
  top: 20px;
  left: 10px;
  color: #606266;
}
.copyDiv {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 12px;
  color: #909399;
}
</style>
    